<template>
  <div class="chart-content-wrapper">
    <top-filter :title="title">
    </top-filter>
    <div class="chart-type1" style="height:68%">
      <div class="people-num-top">
        <div class="show-text-wrapper"></div>
        <div class="show-text-wrapper">
          <span class="people-left-span"></span>人数
        </div>
        <div class="show-text-wrapper">
          <span class="people-right-span"></span>人次
        </div>
      </div>
      <div class="middle-text-wrapper">下为TOP6：</div>
      <div v-for="(item,index) in showDataList">
        <div class="people-num-top-content">
          <div class="show-text-wrapper-hos-name"><p class="hospital-name-title">{{item.hospName}}</p></div>
          <div class="show-text-wrapper">
            <h1 class="decrease-text">{{item.totalPerCount}}</h1>
            <div class="rate-content-wrapper">
              <p class="decrease-text-rate"><span class="same-compare">同比</span>↓&nbsp;&nbsp;{{item.totalPerCountYY}}
              </p>
            </div>
          </div>
          <div class="show-text-wrapper">
            <h1 class="increase-text">{{item.totalPerTime}}</h1>
            <div class="rate-content-wrapper">
              <p class="increase-text-rate"><span class="same-compare">同比</span>↑&nbsp;&nbsp;{{item.totalPerTimeYY}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <summarize :showSummarizeText="conclusion"></summarize>
  </div>
</template>

<script type="text/ecmascript-6">
  import TopFilter from '../filter/top-filter1.vue'
  import Summarize from '../summarize/summarize.vue'
  import {getHospitalInPeopleNumDataRight} from '../../../api/last-api'
  export default {
    components: {
      Summarize,
      TopFilter
    },
    data () {
      return {
        filter: require('../../cnst/allInputs.json').data,
        itemStyle: {
          height: '300px'
        },
        showDataList: [],
        title: '医院就诊人次/人数占比分析',
        conclusion: ''
      }
    },
    mounted(){
//      this.getHospitalInPeopleNumDataRight()
      this.setDataIntoCharts(require('./test/hospitalInNumAnalyseRight.json').data)
    },
    methods: {
      getHospitalInPeopleNumDataRight() {
        getHospitalInPeopleNumDataRight().then((res) => {
          if (res.code == 0) {

          }
        })
      },
      setDataIntoCharts(response) {
        // 设置顶部的标题
        this.title = response.reportName
        // 设置结论
        this.conclusion = response.reportConclusion
        this.showDataList = response.treatments
      }
    }
  };
</script>

<style>
  .people-num-top {
    display: flex;
    margin: 0 50px;
  }

  .people-num-top-content {
    display: flex;
    margin: 0 50px 20px 50px;
  }

  .middle-text-wrapper {
    margin: 20px 30px 30px 30px;
  }

  .show-text-wrapper {
    flex: 1;
  }

  .show-text-wrapper-hos-name {
    flex: 1;
    text-align: right;
    height: 20px;
    line-height: 20px;
  }

  .hospital-name-title {
    margin-right: 60px;
  }

  .people-left-span {
    display: inline-block;
    width: 30px;
    height: 10px;
    background: #119DFB;
  }

  .people-right-span {
    display: inline-block;
    width: 30px;
    height: 10px;
    background: #FFD769;
  }

  .decrease-text {
    color: #129cff;
    font-size: 16px;
  }

  .decrease-text-rate {
    color: #ff6a93;
    font-size: 14px;
  }

  .same-compare {
    color: #ffffff;
    margin-right: 10px;
    font-size: 13px;
  }

  .increase-text {
    color: #ffd66a;
    font-size: 16px;
  }

  .increase-text-rate {
    color: #57d5bb;
    font-size: 13px;
  }

  .rate-content-wrapper {
    margin-top: 3px;
  }

</style>
